<template>
	<div class="index">
		<el-row :gutter="30">
			<el-col class="index-head" :span="24">
				<div class="index-head-left">费用报销</div>
				<div class="quick-entrance">
					<ul>
						<li class="quick-entrance-item">快捷入口：</li>
						<li class="quick-entrance-item">
							<router-link to="/expenditure">加油气</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/weihuweixiu">维修</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/gongzifafang">工资</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/cheliangjieche">检车</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/cheliangbaoxian">保险</router-link>
						</li>
						<!--<li class="quick-entrance-item">
                      <router-link to="/xueyuantuifei">退费</router-link>
                    </li>-->
					</ul>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="30">
			<el-col :span="24" class="my-artcle">
				<div class="pay-method">
					<el-col :span="12">
						<div class="auto-center">
							<el-form labelPosition="right" label-width="126px" :model="formLabelAlign" :rules="rules" ref="form" class="quane-pay">
								<el-form-item label="报销人：" prop="reimbursementPerson">
									<people-input class="pay-method-ipt" v-model="formLabelAlign.reimbursementPerson" placeholder="请选择报销人"></people-input>
								</el-form-item>
								<el-form-item label="报销类型：" prop="reimbursementType">
									<el-select class="pay-method-ipt" v-model="formLabelAlign.reimbursementType" placeholder="请选择">
										<el-option v-for="item in $dicCache.getCacheByMark('REIMBURSEMENTTYPE')" :key="item.dicVal" :label="item.dicName" :value="item.dicVal">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="报销金额：" prop="reimbursementCost">
									<el-input class="pay-method-ipt total paddin-right" :maxlength="5" v-model="formLabelAlign.reimbursementCost"></el-input>
								</el-form-item>
								<el-form-item label="费用用途" prop="reimbursementPurpose">
									<el-input class="pay-method-ipt" v-model="formLabelAlign.reimbursementPurpose"></el-input>
								</el-form-item>
								<el-form-item label="经办人：" prop="operator">
									<people-input class="pay-method-ipt" v-model="formLabelAlign.operator" placeholder="请选择经办人"></people-input>
								</el-form-item>
								<el-form-item label="报销日期：" class="endtime" prop="reimbursementDate">
									<el-date-picker v-model="formLabelAlign.reimbursementDate" class="pay-method-ipt" type="date" placeholder="选择日期"></el-date-picker>
								</el-form-item>
								<!-- <el-form-item label="备注：">
                  <el-input type="textarea" class="pay-method-ipt" v-model="formLabelAlign.beizhu"></el-input>
                </el-form-item> -->
							</el-form>
						</div>
					</el-col>
					<el-col :span="12">
						<!-- upload -->
						<upLoad v-model="filesIds"></upLoad>
					</el-col>
					<el-col :span="24"><img class="submit-btnImg" src="../../static/img/submit-btn.jpg" @click="submit"></el-col>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import upLoad from "@/components/upload";
	import peopleInput from "@/components/people-input";
	export default {
		name: "jianche",
		components: {
			upLoad,
			peopleInput
		},
		data() {
			return {
				formLabelAlign: {
					reimbursementPerson: "",
					reimbursementType: "",
					reimbursementCost: "",
					reimbursementPurpose: "",
					operator: "",
					reimbursementDate: "",
					filesId: ""
				},
				filesIds: [],
				rules: {
					reimbursementPerson: [{
						required: true,
						message: "请输入报销人",
						trigger: "blur"
					}],
					reimbursementCost: [{
						required: true,
						message: "请输入报销金额",
						trigger: "blur"
					}],
					operator: [{
						required: true,
						message: "请输入经办人",
						trigger: "blur"
					}],
					reimbursementDate: [{
						required: true,
						message: "请选择报销时间",
						trigger: "change"
					}],
					reimbursementType: [{
						required: true,
						message: "请选择报销类型",
						trigger: "change"
					}],
					reimbursementPurpose: [{
						required: true,
						message: "请输入费用用途",
						trigger: "blur"
					}]
				}
			};
		},
		methods: {
			// 提交
			submit() {
				//判断是否存在车辆信息
				this.$refs.form.validate(valid => {
					if(valid) {
						this.formLabelAlign.filesId = this.filesIds.join();
						this.$http.post(
							"/reimbursement/addReimbursementInfo",
							this.formLabelAlign,
							d => {
								if(d.status == 1) {
									layer.msg(d.msg);
									this.resetForm();
								}
							}
						);
					} else {
						return false;
					}
				});
			},
			// 重置表单
			resetForm() {
				this.$refs.form.resetFields();
				this.filesIds = [];
			},
		}
	};
</script>

<style scoped>
	.carID {
		width: 70%;
		height: 30px;
		line-height: 30px;
		padding: 6px;
		margin: 70px auto;
		background: url("../../static/img/carID-bg.jpg") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		text-align: center;
		cursor: pointer;
	}
	
	.line {
		border-bottom: 1px solid #e9e9e9;
	}
	
	.carID-line {
		width: 100%;
		height: 30px;
		border: 1px dotted #fff;
		display: block;
		font-size: 18px;
	}
	
	.fresh-date {
		position: absolute;
		bottom: 40px;
		left: 8%;
		color: #b8b8b8;
	}
	
	.upload-title {
		width: 100%;
		float: left;
		height: 44px;
		line-height: 44px;
		margin-top: 34px;
		color: #606266;
	}
	
	.submit-btnImg {
		margin: 30px auto;
		display: block;
		cursor: pointer;
	}
</style>